<template>
    <div class="line">
        <button @click="showMessage">打开弹框</button>
    </div>

    <div class="line">
        <button @click="showLoading">打开Loding</button>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import MessageBox from './components/MessageBox';
    import Loading from './components/Loading';


    const isShow = ref(false);

    function showMessage(){
        MessageBox.alert({
            title: '提示',
            content: '这是一个提示框',
            btnText: '关闭',
            type: 'info'
        });
    }

    function showLoading(){
        const loading = Loading.service({
            text: '加载中...'
        });

        setTimeout(() => {
            loading.close();
        }, 3000)
    }
</script>

<style scoped>
    .line{
        margin: 20px 0;
    }
</style>